<template>
    <div class="app-container" style="height: 100%;flex: 1;padding-top: 0;">
        <div class="app-container-inner" style="display: flex;flex-direction: column;flex: 1;">
            <div class="main">
                <el-tabs v-model="activeName" class="demo-tabs">
                    <el-tab-pane label="工单明细" name="first">
                        <div class="table">
                            <el-table :border="true" stripe resizable :data="OrderList"
                                style="width: 100%;position: absolute;" height="100%">
                                <template #empty>
                                    <el-empty description="暂无数据" />
                                </template>
                                <el-table-column show-overflow-tooltip prop="workNo" label="工单编号" width="160" />
                                <el-table-column show-overflow-tooltip prop="totalPrice" label="工单费用" width="80">
                                    <template #default="scope">
                                        ￥{{ scope.row.totalPrice }}
                                    </template>
                                </el-table-column>
                                <el-table-column show-overflow-tooltip prop="settlement" label="结算状态" width="80">
                                    <template v-slot="i">
                                        {{ i.row.settlement ? '已结算' : '待结算' }}
                                    </template>
                                </el-table-column>
                                <el-table-column show-overflow-tooltip prop="status" label="状态" width="70">
                                    <template #default="scope">
                                        <!-- <el-tag class="ml-2" type="warning" v-if="scope.row.status == 1">待客服确认</el-tag> -->
                                        <el-tag type="warning" v-if="scope.row.status == 1">待派单</el-tag>
                                        <el-tag class="ml-2" type="warning" v-if="scope.row.status == 2">待部门确认</el-tag>
                                        <el-tag class="ml-2" type="success" v-if="scope.row.status == 3">处理中</el-tag>
                                        <el-tag v-if="scope.row.status == 4">已完成</el-tag>
                                        <el-tag type="info" v-if="scope.row.status == 5">已取消</el-tag>
                                    </template>
                                </el-table-column>
                                <el-table-column show-overflow-tooltip prop="userName" label="公司" width="100" />
                                <el-table-column show-overflow-tooltip prop="userPhone" label="公司电话" width="108" />
                                <el-table-column show-overflow-tooltip prop="emp" label="客服" width="80" />
                                <el-table-column show-overflow-tooltip prop="createTime" label="申请时间" width="150" />
                                <el-table-column show-overflow-tooltip prop="updateTime" label="更新时间" width="150" />

                                <el-table-column show-overflow-tooltip fixed="right" label="操作" width="60">
                                    <template #default="scope">
                                        <div class="btns">
                                            <button class="btn-table bgColor2" @click="goWork(scope.row.id)">详细</button>
                                        </div>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </div>
                    </el-tab-pane>
                    <el-tab-pane label="工单物料" name="second">
                        <div class="table">
                            <el-table :border="true" stripe resizable :data="OrderList"
                                style="width: 100%;position: absolute;" height="100%">
                                <template #empty>
                                    <el-empty description="暂无数据" />
                                </template>
                                <el-table-column show-overflow-tooltip label="序号" type="index" fixed="left" min-width="50">

                                </el-table-column>
                                <el-table-column show-overflow-tooltip fixed="left" prop="code" label="物料单号"
                                    min-width="170">
                                    <!-- <template #default="scope">
                                        <span class="number" @click="viewDetail(scope.row.id)">{{ scope.row.code }}</span>
                                    </template> -->
                                </el-table-column>
                                <el-table-column show-overflow-tooltip prop="workNo" label="工单单号" width="160">
                                    <!-- <template #default="scope">
                                        <span class="number" @click="goOrder(scope.row.workId)">{{ scope.row.workNo
                                        }}</span>
                                    </template> -->
                                </el-table-column>
                                <el-table-column prop="state" label="状态" width="83">
                                    <template #default="scope">
                                        <el-tag type="warning" v-if="scope.row.status == 1">待审核</el-tag>
                                        <el-tag v-if="scope.row.status == 2">已通过</el-tag>
                                        <el-tag type="warning" v-if="scope.row.status == 3">已驳回</el-tag>
                                        <el-tag type="info" v-if="scope.row.status == 4">已撒回</el-tag>
                                        <el-tag type="info" v-if="scope.row.status == 5">已取消</el-tag>
                                    </template>
                                </el-table-column>
                                <el-table-column show-overflow-tooltip prop="type" label="申请类型" width="100">
                                </el-table-column>
                                <el-table-column show-overflow-tooltip prop="model" label="物料名称" width="200">
                                </el-table-column>
                                <el-table-column show-overflow-tooltip label="旧件处理方式" width="100">
                                    <template v-slot="i">
                                        {{ i.row.oldCopeWay == 1 ? '废弃' : i.row.oldCopeWay == 2 ? '旧件退回' : '' }}
                                    </template>
                                </el-table-column>
                                <el-table-column show-overflow-tooltip prop="applyTotalQty" label="申请数量" width="80" />
                                <el-table-column show-overflow-tooltip prop="applyTotalPrice" label="申请总金额" width="90">
                                    <template v-slot="i">
                                        ￥{{ i.row.applyTotalPrice }}
                                    </template>
                                </el-table-column>
                                <el-table-column show-overflow-tooltip prop="checkTotalQty" label="审批数量" width="80" />
                                <el-table-column show-overflow-tooltip prop="checkTotalPrice" label="审批总金额" width="90">
                                    <template v-slot="i">
                                        ￥{{ i.row.checkTotalPrice }}
                                    </template>
                                </el-table-column>
                                <el-table-column show-overflow-tooltip prop="applyEmp" label="申请人员" width="120" />
                                <el-table-column show-overflow-tooltip prop="reviewEmp" label="审核人员" width="120" />
                                <!-- <el-table-column show-overflow-tooltip prop="network" label="申请部门" width="150" /> -->
                                <el-table-column show-overflow-tooltip prop="createTime" label="申请时间" width="150" />
                                <el-table-column show-overflow-tooltip prop="reviewTime" label="	审核时间" width="150" />
                                <!-- <el-table-column fixed="right" label="操作" width="60">
                                    <template #default="scope">
                                        <span class="waiting_x" v-if="scope.row.status == 1"
                                            @click="viewCheck(scope.row)">审核</span>
                                        <span class="waiting_pass" v-else>审核</span>
                                    </template>
                                </el-table-column> -->
                            </el-table>
                        </div>
                    </el-tab-pane>
                    <el-tab-pane label="工单费用" name="third">
                        <div class="table">
                            <el-table :border="true" stripe resizable :data="OrderList"
                                style="width: 100%;position: absolute;" height="100%">
                                <template #empty>
                                    <el-empty description="暂无数据" />
                                </template>
                                <el-table-column show-overflow-tooltip label="序号" type="index" fixed="left" min-width="50">
                                </el-table-column>
                                <el-table-column show-overflow-tooltip fixed="left" prop="feeNo" label="费用单号"
                                    min-width="160">
                                    <!-- <template #default="scope">
              <span class="number" @click="viewDetail(scope.row.id)">{{ scope.row.feeNo }}</span>
            </template> -->
                                </el-table-column>
                                <el-table-column show-overflow-tooltip prop="workNo" label="工单单号" width="160">
                                    <!-- <template #default="scope">
              <span class="number" @click="goOrder(scope.row.workId)">{{ scope.row.workNo }}</span>
            </template> -->
                                </el-table-column>
                                <el-table-column prop="state" label="状态" width="83">
                                    <template #default="scope">
                                        <el-tag type="warning" v-if="scope.row.status == 1">待审核</el-tag>
                                        <el-tag v-if="scope.row.status == 2">已通过</el-tag>
                                        <el-tag type="warning" v-if="scope.row.status == 3">已驳回</el-tag>
                                        <el-tag type="info" v-if="scope.row.status == 4">已撒回</el-tag>
                                        <el-tag type="info" v-if="scope.row.status == 5">已取消</el-tag>
                                    </template>
                                </el-table-column>
                                <el-table-column show-overflow-tooltip prop="settlementType" label="结算类型" width="100">
                                </el-table-column>
                                <el-table-column show-overflow-tooltip prop="feeProject" label="项目费用名称" width="100">
                                </el-table-column>
                                <el-table-column show-overflow-tooltip prop="applyFee" label="申请总金额" width="90">
                                    <template v-slot="i">
                                        ￥{{ i.row.applyFee }}
                                    </template>
                                </el-table-column>
                                <el-table-column show-overflow-tooltip prop="checkFee" label="审批总金额" width="90">
                                    <template v-slot="i">
                                        ￥{{ i.row.checkFee }}
                                    </template>
                                </el-table-column>
                                <el-table-column show-overflow-tooltip prop="applyEmp" label="申请人员" width="120" />
                                <el-table-column show-overflow-tooltip prop="reviewEmp" label="审核人员" width="120" />
                                <el-table-column show-overflow-tooltip prop="network" label="申请部门" width="150" />
                                <el-table-column show-overflow-tooltip prop="createTime" label="申请时间" width="150" />
                                <el-table-column show-overflow-tooltip prop="reviewTime" label="	审核时间" width="150" />
                            </el-table>
                        </div>
                    </el-tab-pane>
                    <el-tab-pane label="结算明细" name="fourth">
                        <div class="table">
                            <el-table :border="true" stripe resizable :data="tableData"
                                style="width: 100%;position: absolute;" height="100%">
                                <template #empty>
                                    <el-empty description="暂无数据" />
                                </template>
                                <el-table-column show-overflow-tooltip prop="date" label="申请类型" min-width="200" />
                                <el-table-column show-overflow-tooltip prop="city" label="申请费用" width="120" />
                                <el-table-column show-overflow-tooltip prop="city" label="审批费用" width="120" />
                                <el-table-column show-overflow-tooltip prop="city" label="审核人员" width="120" />
                                <el-table-column show-overflow-tooltip prop="city" label="申请时间" width="180" />
                                <el-table-column show-overflow-tooltip prop="city" label="更新时间" width="180" />
                                <el-table-column show-overflow-tooltip prop="city" label="状态" width="120" />
                                <el-table-column show-overflow-tooltip fixed="right" label="操作" width="100">
                                    <template #default="scope">
                                        <div class="btns">
                                            <button class="btn-table bgColor1" @click="goWork(scope.$index)">工单</button>
                                            <router-link to="/order/ocost" class="btn-table bgColor2">查看</router-link>
                                        </div>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </div>
                    </el-tab-pane>
                    <el-tab-pane label="结算价管理" name="fifth">
                        <div class="table">
                            <el-table :border="true" stripe resizable :data="OrderList"
                                style="width: 100%;position: absolute;" height="100%">
                                <template #empty>
                                    <el-empty description="暂无数据" />
                                </template>
                                <el-table-column show-overflow-tooltip label="序号" type="index" fixed="left" width="50" />
                                <el-table-column show-overflow-tooltip prop="moduleName" label="模块名称" />
                                <el-table-column show-overflow-tooltip prop="price" label="结算费用">
                                    <template v-slot="i">
                                        ￥{{ i.row.price }}
                                    </template>
                                </el-table-column>
                            </el-table>
                        </div>
                    </el-tab-pane>
                    <el-tab-pane label="商家账号" name="six">
                        <!-- <div class="addrole"><button class="btn btn-bg2" @click="editDialogShow()">添加员工</button></div> -->
                        <div class="table">
                            <el-table :border="true" stripe resizable :data="fifthList"
                                style="width: 100%;position: absolute;" height="100%">
                                <template #empty>
                                    <el-empty description="暂无数据" />
                                </template>
                                <el-table-column label="序号" type="index" width="50" align="center" />
                                <el-table-column show-overflow-tooltip prop="username" label="员工姓名" width="120" />
                                <el-table-column show-overflow-tooltip prop="phone" label="手机号" width="140" />
                                <el-table-column show-overflow-tooltip prop="superManager" label="管理权限" width="100">
                                    <template #default="scope">
                                        {{ scope.row.superManager ? '超级管理员' : '普通管理员' }}
                                    </template>
                                </el-table-column>
                                <el-table-column align="center" label="负责人" width="70">
                                    <template #default="scope">
                                        <el-checkbox v-if="scope.row.manager" disabled :checked="scope.row.manager"
                                            size="large" />
                                    </template>
                                </el-table-column>
                                <el-table-column show-overflow-tooltip prop="quit" label="在职状态" width="80">
                                    <template #default="scope">
                                        <el-tag type="info" v-if="scope.row.quit">离职</el-tag>
                                        <el-tag v-else>在职</el-tag>
                                    </template>
                                </el-table-column>
                                <el-table-column show-overflow-tooltip label="接单策略" width="80">
                                    <template #default="scope">
                                        {{ scope.row.autoSureReceiveOrder ? '自动确认' : '手动确认' }}
                                    </template>
                                </el-table-column>
                                <el-table-column show-overflow-tooltip prop="createTime" label="添加时间" width="130" />
                                <el-table-column show-overflow-tooltip prop="updateTime" label="更新时间" width="130" />
                            </el-table>
                        </div>
                    </el-tab-pane>
                    <el-tab-pane label="充值记录" name="seven">
                        <div class="table">
                            <el-table :border="true" stripe resizable :data="OrderList"
                                style="width: 100%;position: absolute;" height="100%">
                                <template #empty>
                                    <el-empty description="暂无数据" />
                                </template>
                                <el-table-column show-overflow-tooltip prop="date" label="申请类型" min-width="200" />
                                <el-table-column show-overflow-tooltip prop="city" label="申请费用" width="120" />
                                <el-table-column show-overflow-tooltip prop="city" label="审批费用" width="120" />
                                <el-table-column show-overflow-tooltip prop="city" label="审核人员" width="120" />
                                <el-table-column show-overflow-tooltip prop="city" label="申请时间" width="180" />
                                <el-table-column show-overflow-tooltip prop="city" label="更新时间" width="180" />
                                <el-table-column show-overflow-tooltip prop="city" label="状态" width="120" />
                                <el-table-column show-overflow-tooltip fixed="right" label="操作" width="100">
                                    <template #default="scope">
                                        <div class="btns">
                                            <button class="btn-table bgColor1" @click="goWork(scope.$index)">工单</button>
                                            <router-link to="/order/ocost" class="btn-table bgColor2">查看</router-link>
                                        </div>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </div>
                    </el-tab-pane>
                </el-tabs>
                <div class="footer">
                    <Pagination ref="pageRef" :list_total="total" @size-change="getnetworkListRows()"
                        @current-change="getnetworkListRows()" />
                </div>
            </div>
            <!-- <SelfDefined :assignDialog="addDialog" @assign-dialog="addDialog = false" :show="show" :getRow="getRow"
                @update-list="getnetworkListRows()">
            </SelfDefined> -->

        </div>
    </div>
</template>
<script setup lang="ts">
import Pagination from '../../../components/Pagination/index.vue'
import { ref, onMounted, reactive, watch, nextTick } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { useRoute, useRouter } from 'vue-router'
import SelfDefined from '../../network/emp/components/SelfDefined.vue'
import * as  _ from 'lodash'
import {
    getNetworkDetailOrderList, getNetworkDetailOrderSpareList, getNetworkDetailModuleSettlementList, getNetworkDetailOrderFeeList
} from '../../../api/network'
import { getFactoryOrderModuleSettlementList, getFactoryRechargeList,getFactoryEmpAccountList } from '../../../api/merchant'
const router = useRouter()
const route = useRoute()
const pageRef = ref()
const activeName = ref('first')
const addDialog = ref(false)
let total = ref(0)
const show:any = ref(null)
let OrderList = ref(null)
let fifthList = ref(null)
let data = reactive({
    "limit": 50,
    "page": 1
})
const emits = defineEmits(['loading-change'])
const tableData = []
// 查看工单
const goWork = (n: number) => {
    router.push('/order/odetail/' + n)
}
watch(activeName,
    (n) => {
        total.value = 0
        switch (n) {
            case 'first':
                NetworkDetailOrderList(getNetworkDetailOrderList)
                break;
            case 'second':
                NetworkDetailOrderList(getNetworkDetailOrderSpareList)
                break;
            case 'third':
                NetworkDetailOrderList(getNetworkDetailOrderFeeList)
                break;
            case 'fourth':
            getFactoryOrderModuleSettlement()
                break;
            case 'fifth':
                NetworkDetailOrderList(getNetworkDetailModuleSettlementList)
                break;
            case 'six':
                nextTick(() => {
                    NetworkDetailEmpList()
                })
                break;
            case 'seven':
            getFactoryRecharge()
                break;

        }
    })
// 点击分页
const getnetworkListRows = () => {
    switch (activeName.value) {
        case 'first':
            NetworkDetailOrderList(getNetworkDetailOrderList)
            break;
        case 'second':
            NetworkDetailOrderList(getNetworkDetailOrderSpareList)
            break;
        case 'third':
            NetworkDetailOrderList(getNetworkDetailOrderFeeList)
            break;
        case 'fourth':
        getFactoryOrderModuleSettlement()
            break;
        case 'fifth':
            NetworkDetailOrderList(getNetworkDetailModuleSettlementList)
            break;
        case 'six':
            nextTick(() => {
                NetworkDetailEmpList()
            })
            break;
        case 'seven':
        getFactoryRecharge()
            break;
    }
}
onMounted(async () => {
    await NetworkDetailOrderList(getNetworkDetailOrderList)
})
// 工单明细列表or工单物料
async function NetworkDetailOrderList(port) {
    OrderList.value = null
    data.limit = pageRef.value?.size
    data.page = pageRef.value?.current
    emits('loading-change', true)
    await port(data, route.params.id).then(res => {
        if (res.data.success) {
            OrderList.value = res.data.data.rows
            total.value = Number(res.data.data.total)
        } else {
            ElMessage({
                showClose: true,
                message: res.data.message,
                type: 'error',
                offset: 200
            })
        }
        emits('loading-change', false)
    })
}
// 获取员工管理
async function NetworkDetailEmpList() {
    data.limit = pageRef.value?.size
    data.page = pageRef.value?.current
    emits('loading-change', true)
    await getFactoryEmpAccountList(data, route.params.id).then(res => {
        if (res.data.success) {
            fifthList.value = res.data.data.rows
            total.value = Number(res.data.data.total)
        } else {
            ElMessage({
                showClose: true,
                message: res.data.message,
                type: 'error',
                offset: 200
            })
        }
        emits('loading-change', false)
    })
}
// 获取结算明细
async function getFactoryOrderModuleSettlement() {
    data.limit = pageRef.value?.size
    data.page = pageRef.value?.current
    emits('loading-change', true)
    await getFactoryOrderModuleSettlementList(data, route.params.id).then(res => {
        if (res.data.success) {
            fifthList.value = res.data.data.rows
            total.value = Number(res.data.data.total)
        } else {
            ElMessage({
                showClose: true,
                message: res.data.message,
                type: 'error',
                offset: 200
            })
        }
        emits('loading-change', false)
    })
}
// 获取充值明细
async function getFactoryRecharge() {
    data.limit = pageRef.value?.size
    data.page = pageRef.value?.current
    emits('loading-change', true)
    await getFactoryRechargeList(data, route.params.id).then(res => {
        if (res.data.success) {
            fifthList.value = res.data.data.rows
            total.value = Number(res.data.data.total)
        } else {
            ElMessage({
                showClose: true,
                message: res.data.message,
                type: 'error',
                offset: 200
            })
        }
        emits('loading-change', false)
    })
}
// 添加or修改员工信息
const getRow = ref(null)
function editDialogShow(add: boolean, row: any = null) {
    addDialog.value = true;
    show.value = add
    getRow.value = row
}

</script>
<style lang="scss" scoped>
@import './index';
</style>